/**
 * Created by xxx on 2017/5/15.
 */
//用react封装
var currentpage = 1,totlepage = 1,i,addressAll = localStorage.address,reserveDeviceType=localStorage.reserveDeviceType;//分页的当前页和总的页数
var addressValue = "";
if(addressAll != null && addressAll != undefined && addressAll != ""){
    addressValue = addressAll.replace(/-/g,"");
}
//表单的最高高度、当前第几页、总页数、总行数、设备投放切换、箱号
var otherData = {currentpage:1,totlepage:1,totlerows:1,pageLeft:0,pageRight:0,batchNumber:'',upBatchNumber:''},tableData = [],schoolDataAll = [];
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <ol className="page-limit-ol">
                            <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                            {
                                items.map(function (item) {
                                    return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                                })
                            }
                            <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)} ><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                        </ol>
                    </ol>
                </div>
            </div>
        );
    },
});
//表单组件
var Table = React.createClass({
    render: function () {
        return (
            <tr>
                <td style={{width: '10%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '40%'}}>{this.props.devicetype=="1"?"13.56":"2.4G"}考勤卡</td>
                <td style={{width: '40%'}}>{this.props.cardid}</td>
            </tr>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData:this.props.otherData,
            tableData:this.props.tableData
        }
    },
    componentDidMount: function () {
        var svar = this;
        var param="param={";
        param = getJsonDataNotEmpty(param,"islast",'"1"');
        param = getJsonDataNotEmpty(param,"pagenumber","1");
        param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
        param += "}";
        suixun.ajax(serverUrl+'/deviceInitManage/getDeviceReserves.json',param,"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult != null){
                    for(var i=0;i<data.info.queryresult.length;i++){
                        var obj=data.info.queryresult[i];
                        tableData[i] = {keyid:i,cardid:obj.cardid,devicetype:obj.devicetype,id:obj.id};
                    }
                    var pageRight = 0;
                    if(data.info.totlepage > 1){
                        pageRight = 1
                    }
                    otherData = {pageLeft:0,pageRight:pageRight};
                    currentpage = 1;totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                    svar.setState({tableData:tableData,otherData:otherData});
                }else{
                    otherData = {pageLeft:0,pageRight:0};
                    currentpage = 1;totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                    svar.setState({tableData:tableData,otherData:otherData});
                }
            }
        });

    },

    //学校
    onClickGoSchool: function () {
        window.location.href = "../schoolManage/querySchoolList.html";
    },
    //设备投放
    onClickDeviceDelivery: function () {
        window.location.href = "../deviceInitManage/queryDeviceInitList.html";
    },
    //SIM卡投放
    onClickSIMDelivery: function () {
        window.location.href = "../simInfoManage/querySimInfoList.html";
    },
    //设备套餐
    onClickDeviceSetMeal: function () {
        window.location.href = "../packageManage/queryPackageList.html";
    },
    //设备零售价
    onClickDeviceRetailPrice: function () {
        window.location.href = "../devicePriceManage/queryDevicePriceList.html";
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        //分页-调用ajac然后把数据查询出来:获取name的值
        //计算currentpage
        suixun.showLoding();//显示加载中
        var onPageLeft = 0,onPageRight = 1,savr = this;
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }else{
            return;
        }
        //修改左右的按钮
        if((currentpage == totlepage && totlepage == 1)|| totlepage == 0){
            onPageLeft = 0;
            onPageRight = 0;
        }else if(currentpage == totlepage && totlepage > 1){
            onPageLeft = 1;
            onPageRight = 0;
        }else if(1 < currentpage && currentpage < totlepage){
            onPageLeft = 1;
            onPageRight = 1;
        }
        var param="param={";
        param = getJsonDataNotEmpty(param,"islast",'"1"');
        param = getJsonDataNotEmpty(param,"pagenumber",'"'+currentpage+'"');
        param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
        param += "}";
        suixun.ajax(serverUrl+'/deviceInitManage/getDeviceReserves.json',param,"get",function(data){
            tableData = [];
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult != null){
                    for(var i=0;i<data.info.queryresult.length;i++){
                        var obj=data.info.queryresult[i];
                        tableData[i] = {keyid:i,cardid:obj.cardid,devicetype:obj.devicetype,id:obj.id};
                    }
                    if(data.info.totlepage > 1 && data.info.totlepage > currentpage){
                        onPageRight = 1
                    }else{
                        onPageRight = 0;
                    }
                    otherData = {pageLeft:onPageLeft,pageRight:onPageRight};
                    totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                    savr.setState({tableData:tableData,otherData:otherData});
                }else{
                    otherData = {pageLeft:0,pageRight:0};
                    totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                    savr.setState({tableData:tableData,otherData:otherData});
                }
            }
        });
    },
    /**
     * 导出模版下载
     * @returns {XML}
     */
    excleModel: function () {
        suixun.confirm_noTit("是否导出Excel模版？",function (data) {
            if(data){
                window.location.href = serverUrl+"/deviceInitManage/export_DeviceReserveTemplate.json";
            }
        });
    },
    /**
     * 全部撤销
     */
    onClickRevoke: function () {
        var svar = this;
        suixun.confirm_noTit("是否撤销数据！",function (data) {
            if(data){
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+'/deviceInitManage/cancelDeviceReserve.json','',"get",function(data){
                    suixun.hideLoding(200);//隐藏加载中
                    if(data.code == 200){
                        suixun.alert("撤销成功！",function (data) {
                            if(data){
                                svar.onClickReturn();
                            }
                        })
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    /**
     * 返回
     * @returns {XML}
     */
    onClickReturn: function () {
        window.history.go(-1);
    },
    render: function () {
        {
            var Tabels = this.state.tableData.map(function (data,index) {
                return (
                    <Table key={index} listNumber={index} id={data.id} devicetype={data.devicetype} cardid={data.cardid}/>
                )
            });
        }
        return (
            <div className="outside " >
                <div className="school tableManage-body">
                    <div className="header-menu">
                        <ul>
                            <li onClick={this.onClickGoSchool} >学校</li>
                            <li onClick={this.onClickDeviceDelivery} >设备管理</li>
                            <li onClick={this.onClickSIMDelivery} >SIM卡管理</li>
                            <li onClick={this.onClickDeviceSetMeal} style={{display:"none"}}>设备套餐</li>
                            <li onClick={this.onClickDeviceRetailPrice} style={{display:"none"}}>设备零售价</li>
                            <li className="select">区域储备量</li>
                        </ul>
                        <div onClick={this.excleModel} className="excleModel" >
                            <img src="../img/icon/annotations.png" />
                            <span>导出Excel模版下载</span>
                        </div>
                    </div>
                    <header>
                        <div className="header-left">
                            <div style={{marginRight: '0px'}} className="addButton" onClick={this.onClickReturn}>
                                <span className="addButton-img"><img style={{position: "relative",top: "6px"}} src="../img/icon/fanhui.png" /></span>
                                <span className="addButton-text">返回</span>
                            </div>
                        </div>
                        <div className="header-right">
                            <div className="addButton" style={{width:'105px'}} onClick={this.onClickRevoke}>
                                <span className="addButton-img" style={{left: "-34px"}}><img src="../img/icon/gotOut.png" /></span>
                                <span className="addButton-text" style={{width:'75px'}} >全部撤销</span>
                            </div>
                        </div>
                    </header>
                    <div className="parentsInfo tableInfo">
                        <div className="parentsInfo-data tableInfo-data">
                            <div className="parentsInfo-data-table tableInfo-data-table" >
                                <table className="head-body head-body">
                                    <thead>
                                    <th style={{width: '20%'}}>序号</th>
                                    <th style={{width: '40%'}}>设备类型</th>
                                    <th style={{width: '40%'}}>考勤卡号</th>
                                    </thead>
                                    <tbody className="reservDetail-tbody">
                                    {this.state.tableData==""?'':Tabels}
                                    </tbody>
                                </table>
                                {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                            </div>
                        </div>
                        <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                    </div>
                    <footer id="copyright">
                        <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                    </footer>
                </div>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  otherData={otherData} tableData={tableData} />,
    document.getElementById('tableManage')
);
